<!--  -->
<template>
  <div class="box-footer">
    <div class="notice-u"><i class="el-icon-warning"></i> 说明：这里选择只是更换主题编号，不会对站点内容、资源、图片变更！</div>
    <div class="theme-filter-u">
        <el-input v-model="themeName" placeholder="模板编号" size="mini"
            style="width: 280px;" @keyup.enter.native="searchTheme"></el-input>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchTheme">搜索</el-button>
      </div>
    <div class="theme-list-u" :class="isdrawer ? 'theme-list-drawer-u' : ''" v-loading="loading">
      <div v-if="themes.length < 1" class="no-data">暂无数据</div>
      <div class="themeBox-u" :class="isdrawer ? 'themeBox-drawer-u' : ''" v-else>
        <el-scrollbar style="height:100%">
          <div class="themeList-u">
            <ul class="clearfix">
              <li v-for="(item, index) in themes" :key="index" :class="{active: currentTheme === item}">
                <div class="item" @click="chooseTheme(item)">
                  <div class="img"><img :src="'//bisostatic.35.cn/site/assets/themeImages/theme' + item + '.jpg'"/></div>
                  <div class="tml-opt clearfix">
                    <div class="tml-num">编号：{{item}}</div>
                    <!-- <div class="clearfix">
                      <div class="tml-color" @click.stop="editColor(item)"><span class="color-value" style="background-color: brown;"></span></div>
                      <div class="tml-preview"><a href="">预览</a></div>
                    </div> -->
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="pagebox">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total" :current-page="currentPage">
      </el-pagination>
    </div>
    <DialogEditorThemeColorN ref="editorThemeColor"/>
    <div class="btn-footer">
      <el-button size="small" @click.stop="close">取消</el-button>
      <el-button type="primary" size="small" @click.stop="save">
        保存</el-button>
    </div>
  </div>
</template>

<script>
import EmptyImg from '@/assets/images/image-empty1.png'
import DialogEditorThemeColorN from '@/components/common/design/dialog/templateTheme/DialogEditorThemeColorN.vue'
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import PubSub from 'pubsub-js'
import { mapState } from 'vuex'
export default {
  props: {
    dialogClose: {
      type: Function
    },
    isdrawer: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: true,
      iEmpty: EmptyImg,
      // 主题列表
      themesAllS: [],
      themesAll: [],
      themes: [],
      // 当前主题
      currentTheme: null,
      // 数据库中的主题
      dtheme: null,
      total: 0,
      pageSize: 15,
      current: 1,
      currentPage: 1,
      // 搜索input
      themeName: ''
    }
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    this.init()
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  methods: {
    chooseTheme (theme) {
      if (theme === this.currentTheme) {
        return
      }
      this.currentTheme = theme
    },
    init () {
      this.loading = true
      this.$post('/site/site-theme-current', null).then(response => {
        if (response && response.current) {
          this.dtheme = this.currentTheme = response.current
        }
        if (response && response.allTheme) {
          this.themesAll = response.allTheme.map((item) => {
            return item.id
          })
          this.themesAllS = JSON.parse(JSON.stringify(this.themesAll))
        }
        this.total = this.themesAll.length
        if (this.currentTheme && (this.currentTheme > this.pageSize)) {
          this.current = parseInt(this.currentTheme / this.pageSize) + 1
        } else {
          this.current = 1
        }
        this.currentPage = this.current
        this.gettableData(this.current)
        this.loading = false
      })
    },
    gettableData (pageCur) {
      this.themes = []
      for (let i = (pageCur - 1) * this.pageSize; i < pageCur * this.pageSize && i < this.themesAll.length; i++) {
        this.themes.push(this.themesAll[i])
      }
    },
    handleCurrentChange (val) {
      this.current = val
      this.currentPage = val
      this.gettableData(this.current)
    },
    editColor (id) {
      this.$refs['editorThemeColor'].show()
    },
    close () {
      this.loading = true
      this.themesAllS = []
      this.themesAll = []
      this.themes = []
      this.currentTheme = null
      this.dialogClose()
    },
    save () {
      this.$post('/site/update-site-theme', {
        theme: this.currentTheme
      }).then(response => {
        this.loading = false
        if (response) {
          this.close()
          PubSub.publish(PubsubType.PUBSUB_DESIGN_REFRESH_PAGE)
        }
      })
      this.close()
    },
    searchTheme () {
      this.loading = true
      if (!this.themeName.trim()) {
        this.themesAll = JSON.parse(JSON.stringify(this.themesAllS))
      } else {
        this.themesAll = this.themesAllS.filter((item) => {
          if (item.indexOf(this.themeName.trim()) > -1) {
            return item
          }
        })
      }
      this.total = this.themesAll.length
      this.current = 1
      this.currentPage = 1
      this.gettableData(this.current)
      this.loading = false
    }
  },
  components: {
    DialogEditorThemeColorN
  }
}

</script>

<style scoped lang="scss">
.theme-filter-u{ margin-bottom: 15px;}
.no-data{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #888888;
  min-height: 100px;
  text-align: center;
}
.theme-list-u{
  height: 350px;
}
.themeBox-u{
  height: 350px;
}
.theme-list-drawer-u,.themeBox-drawer-u{
  height: calc(100vh - 250px);
}
.themeBox-u /deep/ .el-scrollbar__wrap{
  overflow-x: hidden;
}
.themeList-u {
  width: 100%;
  overflow: hidden;
}
.themeList-u ul, .themeList-u li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.themeList-u ul{
  margin: 0 -7px;
  display: block;
}
.themeList-u li {
  float: left;
  width: 33.33%;
  margin-bottom: 14px;
}
.themeList-u li .item {
  margin: 0 7px;
  background: #F9F9F9;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  padding: 10px;
  border:1px solid #F9F9F9;
  cursor: pointer;
}
.themeList-u li.active .item{
  border-color:#258FFB;
}
.themeList-u li .item .img{
  background: #fff;
  height: 102px;
  overflow: hidden;
  line-height: 102px;
  text-align: center;
}
.themeBox-drawer-u /deep/ .themeList-u li .item .img{
  height: 166px;
  line-height: 166px;
}
.themeList-u li .item .img img {
  max-width: 100%;
  max-height: 100%;
}
.themeList-u li .tml-opt {
  padding: 10px 0 0;
}
.themeList-u li .tml-opt .tml-num {
  margin-bottom: 5px;
}
.themeList-u li .tml-opt .tml-color{
  float: left;
}
.themeList-u li .tml-opt .tml-color .color-value{
   display:inline-block;
   width: 18px;
   height: 18px;
   -webkit-border-radius: 50%;
   border-radius: 50%;
}
.themeList-u li .tml-opt .tml-preview {
  float: right;
}
.themeList-u li .tml-opt .tml-preview a {
  color: #258FFB;
}
.pagebox{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  /deep/ .el-pager li{
    min-width:30px;
  }
}
</style>
